<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 组件生命周期</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="./components/item.js"></script>
    <script src="./components/about.js"></script>
    <script src="./components/home.js"></script>
    <script src="./components/user.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>Vue实例</h1>
      <hr />
      <!-- <list v-if="isShow"></list>
      <button @click="isShow=!isShow">{{isShow?'隐藏':'显示'}}</button> -->

      <button @click="current='Home'">Home</button>
      <button @click="current='List'">List</button>
      <button @click="current='About'">About</button>
      <button @click="current='User'">User</button>
      <hr />
      <keep-alive>
        <component :is="current" />
      </keep-alive>
    </div>

    <script>
      const List = {
        template: `<div class="list">
            <h1>这是一个列表</h1>
            <button @click="num++">{{num}}</button>
            <Item></Item>
          </div>`,
        data() {
          return {
            num: 1,
          };
        },
        components: { Item },
        beforeCreate() {
          console.log("beforeCreate");
        },
        created() {
          console.log("created");
        },
        beforeMount() {
          console.log("beforeMount");
        },
        mounted() {
          console.log("mounted");
        },
        beforeUpdate() {
          console.log("beforeUpdate");
        },
        updated() {
          console.log("updated");
        },
        beforeUnmount() {
          console.log("beforeUnmount");
        },
        unmounted() {
          console.log("unmounted");
        },
      };
      const app = Vue.createApp({
        data() {
          return {
            isShow: true,
            current: 'Home',
          };
        },
        components: {
          List,
          Home,
          About,
          User,
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>
